<template>
  <div>
    <template v-for="(tag, index) in tags">
      <a-tooltip v-if="tag.length > 20"
                 :key="tag.id"
                 :title="tag.name">
        <a-tag :key="tag.id"
               :closable="index !== 0"
               @close="() => handleClose(tag)">
          {{ `${tag.slice(0, 20)}...` }}
        </a-tag>
      </a-tooltip>
      <a-tag v-else
             :key="tag.id"
             :closable="index !== 0"
             @close="() => handleClose(tag)">
        {{ tag.name }}
      </a-tag>
    </template>
    <a-input v-if="inputVisible"
             ref="input"
             type="text"
             size="small"
             :style="{ width: '78px' }"
             :value="inputValue"
             @change="handleInputChange"
             @keyup.enter="handleInputConfirm" />
    <a-tag v-else
           style="background: #fff; borderStyle: dashed;"
           @click="showInput">
      <a-icon type="plus" /> New Tag
    </a-tag>
  </div>
</template>
<script>
import { getAction, deleteAction, postAction } from '@/api/manage'

export default {
  data() {
    return {
      tags: ['行业动态', '软件更行', '编程语言'],
      inputVisible: false,
      inputValue: '',
    }
  },
  created() {
    this.loaddata()
  },
  methods: {
    loaddata() {
      let url = '/juejingzixuntype/juejingZixunType/rootList'
      let params = {}
      getAction(url, params)
        .then((res) => {
          console.log(res);
          if (res.success && res.result.records.length > 0) {
            this.tags = []
            res.result.records.forEach((record) => {
              this.tags.push({
                id: record['id'],
                name: record['name'],
              })
            })
            
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    addBq(inputValue) {
      let url = '/juejingzixuntype/juejingZixunType/add'
      let name = inputValue
      let params = { pid: '', name: name, content: name }
      postAction(url, params)
        .then((res) => {
          console.log(res);
          this.loaddata();
        // console.log(this.tags);
          if (res.code == 200) {
            alter('新增成功')
            console.log('试试')
          } else {
            alter('新增失败')
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleClose(removedTag) {
      const tags = this.tags.filter((tag) => tag !== removedTag)
      this.tags = tags
      this.delBq(removedTag.id)
    },

    delBq(inputValue) {
      let url = '/juejingzixuntype/juejingZixunType/delete'
      let id = inputValue
      let params = { id: id }
      deleteAction(url, params)
        .then((res) => {
          if (res.success) {
            alter('删除成功')
          } else {
            alter('删除失败')
          }
        })
        .finally(() => {
          this.loading = false
        })
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },

    handleInputChange(e) {
      this.inputValue = e.target.value
      delBq(e)
      //在这里引用删除的操作
    },

    handleInputConfirm() {
      const inputValue = this.inputValue
      this.addBq(inputValue)
    },
  },
}
</script>
